<template>
  <el-row :gutter="10" class="chart-nav">
    <el-col :xs="24" :sm="24" :lg="12">
      <el-card class="box-card">
        <div id="chart">
        </div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="24" :lg="12">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>最近订单情况</span>
        </div>
        <orders/>
      </el-card>
    </el-col>
  </el-row>
</template>
<script>
import orders from "@/views/admin/childComps/dashboard/childComps/Orders";
import {getSaleLast7} from "@/network/dashboard";
export default {
  name: "Chart",
  components:{orders},
  data(){
    return{
      userChart:null,
      days:[],
      totals:[]
    }
  },
  methods:{
    buildChart(id){
      this.userChart = this.$echarts.init(document.getElementById(id))
      this.userChart.setOption({
        title: {
          text: '最近销售情况',
          textStyle: {
            align: 'left',
            fontWeight: 700,
            fontSize: 18,
          },
        },
        xAxis: {
          type: 'category',
          data: this.days
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.totals,
            type: 'line'
          }
        ]
      })
    },
  },
  mounted() {
    //缩放重新渲染
    let _this = this;
    window.addEventListener('resize',function () {
      _this.userChart.resize();
    })
  },
  created() {
    getSaleLast7().then(res=>{
      res.data.data.forEach(s=>{
        this.days.push(s.days)
        this.totals.push(s.totals)
      })
      this.buildChart('chart')
    })
  }
}

</script>

<style scoped>
  .chart-nav {
    width: 100%;
    height: 490px;
  }
  #chart, .box-card{
    height: 490px;
  }
  .box-card span {
    font-size: 18px;
    font-weight: 700;
  }
</style>